<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import daglService from '@/api/dagl'
import formBox from '@/components/queryTable/form/index.vue'
import tableBox from '@/components/queryTable/table/index.vue'
import { formItems } from '../form-item'
import { YdcajListQueryResult } from '@/api/dagl-dto'
import router from '@/router/index'
import { TableItem } from '@/api/common'
import jcbgDialog from '../dialogs/jcbg-dialog.vue'

// 入参
// loading
const loading = ref<boolean>(false)
const formLabel = ref()
// 生命周期
onMounted(async () => {
  loading.value = true
  formLabel.value = await formItems('ydcaj')
  loading.value = false
  // 分页
  changePageNum(1)
})

const total = ref<number>(0)
const page = computed(() => {
  return {
    pageNum: form.value.pageNum,
    pageSize: form.value.pageSize,
    total: total.value,
    exportParams: {
      url: `${window.IPCONFIG}/api/dagl/queryYdcajList`,
      wjmc: '已导出案卷',
    },
  }
})

/*
 * 分页
 */
const changePageNum = (val: number) => {
  form.value.pageNum = val
  getTableData()
}

/*
 * 分页
 */
const changePageSize = (val: number) => {
  form.value.pageNum = 1
  form.value.pageSize = val
  getTableData()
}

/*
 * 查询按钮
 */
const searchTable = (data: any) => {
  let newObj: any = {}
  for (const key in data) {
    if (key.endsWith('-rq')) {
      const kssj = key.replace('-rq', 'ksrq')
      const jssj = key.replace('-rq', 'jsrq')
      if (data[key]?.length) {
        newObj[kssj] = data[key][0]
        newObj[jssj] = data[key][1]
      } else {
        newObj[kssj] = ''
        newObj[jssj] = ''
      }
    }
    newObj[key] = data[key]
  }
  form.value.filter = newObj
  getTableData()
}

/*
 * 获取表格数据
 */
const tableBoxRef = ref<InstanceType<typeof tableBox>>()
// 表格数据
const tableData = ref<TableItem>({
  data: [],
  titles: [
    {
      label: '案件名称',
      prop: 'ajmc',
      width: 200,
      custom: true,
      sort: true,
      dqfs: 'left',
    },
    { label: '部门受案号', prop: 'bmsah', width: 280, dqfs: 'left' },
    { label: '统一受案号', prop: 'tysah', width: 200, dqfs: 'left' },
    { label: '档号', prop: 'dh', width: 200, dqfs: 'left' },
    { label: '归档日期', prop: 'gdrq', width: 120, dqfs: 'left' },
    { label: '四性检测结果', prop: 'sxjcjgmc', width: 160, dqfs: 'left' },
    {
      label: '导出类型',
      prop: 'sjbdclx',
      width: 120,
      format: {
        '0': '实时导出',
        '1': '定时导出',
      },
      dqfs: 'left',
    },
    { label: '导出人', prop: 'dcr', width: 120, dqfs: 'left' },
    { label: '导出时间', prop: 'dcsj', width: 120, dqfs: 'left' },
    { label: '导出状态', prop: 'dczt', width: 120, dqfs: 'left' },
    { label: '档案接收状态', prop: 'dajszt', width: 160, dqfs: 'left' },
    { label: '案卷数量', prop: 'ajsl', width: 120, dqfs: 'left' },
    { label: '总页数', prop: 'zys', width: 120 },
    { label: '纸质页数', prop: 'zzys', width: 120, dqfs: 'left' },
    { label: '音像', prop: 'sxsl', width: 120, dqfs: 'left' },
  ],
})
// 查询条件
const form = ref({
  pageSize: 20,
  pageNum: 1,
  filter: {
    bmsah: '',
    ajmc: '',
    tysah: '',
    dh: '',
    gdksrq: '',
    gdjsrq: '',
    dcr: '',
    dcztdm: '',
    dcksrq: '',
    dcjsrq: '',
    dajsztdm: '',
  },
})
const getTableData = () => {
  const params = form.value
  loading.value = true
  daglService
    .queryYdcajList(params)
    .then((res) => {
      if (res) {
        tableData.value.data = res.data.list
        total.value = res.data.total
      }
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      loading.value = false
    })
}

/**
 * 表格选择
 */
const multipleSelection = ref<YdcajListQueryResult[]>([])
const selectionChange = (val: YdcajListQueryResult[]) => {
  multipleSelection.value = val
}

/*
 * 打开归档跟踪弹框
 */
const openGdgzDialog = (row: YdcajListQueryResult) => {
  tableBoxRef.value?.openGdgzDialog(row.gdbh)
}

/*
 * 点击案件名称进入归档
 */
const checkRow = (row: any) => {
  router.push({
    path: '/jcgshxq',
    query: {
      ...row,
      route: '/dagl',
      jumpFrom: 'ydcaj',
    },
  })
}
/*
 * 打开归档登记表弹窗
 */
const openGddjbDialog = (arr: YdcajListQueryResult[]) => {
  tableBoxRef.value?.openWsDialog(arr)
}
/*
 * 打开实体材料归档交接单
 */
const jcbgDialogRef = ref<InstanceType<typeof jcbgDialog>>()
const openJcbgDialog = (row: any) => {
  jcbgDialogRef.value!.openDialog(row)
}
/*
 * 数据包导出（下载文件）
 */
const downloadData = () => {
  loading.value = true
  const params = { dabh: multipleSelection.value[0].dabh }
  daglService
    .dcDaxxsjb(params)
    .then(() => {
      ElMessage.success('操作成功，请关注导出状态')
      getTableData()
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      loading.value = false
    })
}

/**
 * 数据源
 */
const optionsObjs = ref<any>({})
defineExpose({ changePageNum })
</script>
<template>
  <div class="container" v-loading="loading">
    <!--表单-->
    <div class="form-box">
      <form-box
        ref="formBoxRef"
        :formLabel="formLabel"
        :formData="form.filter"
        :moreShow="true"
        :optionsObj="optionsObjs"
        @searchEvent="searchTable"
      />
    </div>
    <!--按钮组-->
    <div class="btn-box">
      <div class="table-title">
        <span>已导出案卷</span>
      </div>
      <button
        class="btn_operation"
        @click="downloadData"
        :disabled="multipleSelection.length !== 1"
      >
        数据包再次导出
      </button>
      <button class="btn_operation" @click="changePageNum(1)">
        <div class="btn-refresh"></div>
        刷新
      </button>
    </div>
    <!--表格-->
    <div class="table-box">
      <table-box
        gnbm="dagl-ydcaj"
        ref="tableBoxRef"
        :table-data="tableData"
        :selectShow="true"
        :showExport="true"
        :formParams="form"
        :getTableDataParam="page"
        :tableInfo="{ total: page.total }"
        @changeCurrent="changePageNum"
        @changeSize="changePageSize"
        @selectionChange="selectionChange"
        @checkRow="checkRow"
      >
        <template #myAction>
          <el-table-column label="操作" width="100" fixed="right">
            <template #default="scope">
              <div class="active-img" title="归档跟踪" @click="openGdgzDialog(scope.row)">
                <img src="@/assets/images/gdgztext.png" />
              </div>
              <div class="active-img" title="归档登记表" @click="openGddjbDialog([scope.row])">
                <img src="@/assets/images/gddjb.png" />
              </div>
              <div
                v-if="scope.row.sxjcjgdm === 'gd0710002'"
                class="active-img"
                title="检测结果"
                @click="openJcbgDialog(scope.row)"
              >
                <img src="@/assets/images/details.png" />
              </div>
            </template>
          </el-table-column>
        </template>
      </table-box>
    </div>
    <jcbgDialog ref="jcbgDialogRef"></jcbgDialog>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  .form-box {
    width: 100%;
  }
  .btn-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
  }
  .table-box {
    flex: 1;
    flex-shrink: 0;
    overflow: auto;
  }
  .active-img {
    cursor: pointer;
    float: left;
  }
  .active-img + .active-img {
    margin-left: 10px;
  }
}
.export-excel {
  li {
    text-align: center;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    &:hover {
      background-color: #ecf5ff;
      color: #266df5;
    }
  }
}
</style>
